<template>
	<section class="panel list-panel">
		<div class="panel-header">
			<div class="chip">
				<span class="sun"></span>
				<span class="chip-text">Espresso Events</span>
			</div>
		</div>
		<ul class="list">
			<li v-for="ev in events" :key="ev.id" class="item" @click="$emit('focus-event', ev)">
				<div class="thumb" :style="thumbStyle(ev)"></div>
				<div class="content">
					<div class="row">
						<div class="name">{{ ev.city }}, {{ ev.country }}</div>
						<span :class="['badge', ev.status === 'upcoming' ? 'upcoming' : 'past']">{{ ev.status === 'upcoming' ? 'UPCOMING' : 'PAST' }}</span>
					</div>
					<div class="meta-row">
						<span class="meta"><span class="icon">📅</span>{{ ev.date || '—' }}</span>
						<span class="meta"><span class="icon">👥</span>{{ ev.attendees || '—' }}</span>
					</div>
					<div class="desc">{{ ev.description }}</div>
				</div>
			</li>
		</ul>
	</section>
</template>

<script>
export default {
	name: 'EventsList',
	props: { events: { type: Array, default: () => [] } },
	methods: {
		thumbStyle(ev) {
			const url = ev.image || ''
			if (url) return { backgroundImage: `url(${url})` }
			return { background: 'linear-gradient(135deg, #f7f2ea, #efe7da)' }
		}
	}
}
</script>

<style scoped>
.panel { padding: 12px; border-bottom: 1px solid #eee; }
.panel-header { margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: #fff7e6; border: 1px solid #f1e2c7; color: #8a6d3b; font-weight: 600; }
.sun { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffd27a, #f4a940); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6); }
.chip-text { font-size: 12px; }
.list { list-style: none; padding: 0; margin: 0; }
.item { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 12px; border: 1px solid #efe7da; border-radius: 14px; margin-bottom: 12px; cursor: pointer; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.02); transition: box-shadow .15s ease, transform .05s ease; }
.item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.thumb { width: 56px; height: 56px; border-radius: 12px; background-size: cover; background-position: center; box-shadow: 0 1px 2px rgba(0,0,0,0.05) inset; }
.content { min-width: 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.name { font-weight: 700; color: #2f2212; line-height: 1.2; }
.meta-row { display: flex; gap: 16px; color: #6b6b6b; font-size: 12px; margin-top: 6px; }
.meta .icon { margin-right: 4px; }
.desc { color: #555; font-size: 13px; margin-top: 8px; }
.badge { font-size: 11px; border-radius: 999px; padding: 2px 8px; border: 1px solid #ddd; }
.upcoming { color: #1659aa; border-color: #cddff5; background: #eef5ff; }
.past { color: #8a6d3b; border-color: #f1e2c7; background: #fff7e6; }
</style> 